<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="/home/css/iconfont.css">
	<link rel="stylesheet" href="/home/css/global.css">
	<link rel="stylesheet" href="/home/css/bootstrap.min.css">
	<link rel="stylesheet" href="/home/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="/home/css/login.css">
	<script src="/home/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="/home/js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="/home/js/jquery.form.js" charset="UTF-8"></script>
	<script src="/home/js/global.js" charset="UTF-8"></script>
	<script src="/home/js/login.js" charset="UTF-8"></script>
	<title>淘亿点 - 登录 / 注册</title>
</head>
<body>
<div class="public-head-layout container">
	<a class="logo" href="index.html"><img src="/home/images/icons/logo.jpg" alt="淘亿点" class="cover"></a>
</div>
<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
	<div class="login-layout container">
		<div class="form-box login">
			<div class="tabs-nav">
				<h2>欢迎登录淘亿点购物平台</h2>
			</div>
			<div class="tabs_container">
				<form class="tabs_form" action="/home/login" method="post" id="login_form">
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">
								<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
							</div>
							<input class="form-control phone" name="phone" id="phone" required placeholder="手机号" maxlength="11" autocomplete="off" type="text">
						</div>
					</div>
					<div class="form-group">
						<div class="input-group">
							<div class="input-group-addon">
								<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
							</div>
							<input class="form-control password" name="password" id="password" placeholder="请输入密码" autocomplete="off" type="password">
							<div class="input-group-addon pwd-toggle" title="显示密码"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
						</div>
					</div>
					<div class="checkbox">
						<label>
							<input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
						</label>
						<a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
					</div>
					<!-- 错误信息 -->
					<div class="form-group">
						<div class="error_msg" id="login_error">
							<!-- 错误信息会显示在这里 -->
						</div>
					</div>
					<button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button" onclick="login()">登录</button><br>
					<p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
				</form>
				<!-- 成功后的内容 -->
			</div>
		</div>

		<!-- 注册和找回密码部分保持不变 -->

	</div>
</div>

<script>
	// 修正后的登录函数
	function login() {
		// 正确获取手机号和密码
		let phone = $('#phone').val();
		let password = $('#password').val();
		let rememberMe = $('#login_checkbox').is(':checked');

		console.log('手机号:', phone); // 调试用
		console.log('密码:', password); // 调试用

		// 基本验证
		if (!phone) {
			showError('请输入手机号');
			return;
		}

		if (!password) {
			showError('请输入密码');
			return;
		}

		// 手机号格式验证
		if (!/^1[3-9]\d{9}$/.test(phone)) {
			showError('手机号格式不正确');
			return;
		}

		// 显示加载状态
		$('#login_submit').prop('disabled', true).text('登录中...');

		// 发送ajax请求
		$.ajax({
			url: "/home/login",
			type: "post",
			data: {
				"phone": phone,
				"password": password,
				"rememberMe": rememberMe
			},
			dataType: "json",
			success: function(resp) {
				$('#login_submit').prop('disabled', false).text('登录');
				if (resp.code == 200) {
					if(resp.data == "user_role"){
						window.location.href = "/home/index.html";
					} else {
						window.location.href = "/admin/index.html";
					}
				} else {
					showError(resp.message || '登录失败');
				}
			},
			error: function(xhr, status, error) {
				$('#login_submit').prop('disabled', false).text('登录');
				showError('网络错误: ' + error);
			}
		});
	}

	// 显示错误信息的函数
	function showError(message) {
		$('#login_error').html(
				'<div class="alert alert-warning alert-dismissible fade in" role="alert">' +
				'<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
				'<span aria-hidden="true">&times;</span></button>' +
				'<strong>错误：</strong>' + message +
				'</div>'
		);
	}

	// 显示/隐藏密码功能
	$(document).ready(function() {
		// 密码显示切换
		$('.pwd-toggle').click(function() {
			var passwordInput = $(this).closest('.input-group').find('.password');
			var type = passwordInput.attr('type');
			if (type === 'password') {
				passwordInput.attr('type', 'text');
				$(this).find('.glyphicon').removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
			} else {
				passwordInput.attr('type', 'password');
				$(this).find('.glyphicon').removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');
			}
		});

		// 切换登录/注册/找回密码面板
		$('#register').click(function() {
			$('.form-box').hide();
			$('.register').show();
		});

		$('#resetpwd').click(function() {
			$('.form-box').hide();
			$('.resetpwd').show();
		});

		$('#reglogin, #pwdlogin').click(function() {
			$('.form-box').hide();
			$('.login').show();
		});

		// 默认显示登录面板
		$('.form-box').hide();
		$('.login').show();
	});
</script>
</body>
</html>